<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加品牌</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <h3>添加品牌</h3>
    <form @submit.prevent="requestAddOrUpdateBrand">
        <input type="hidden" v-model="formData.id">
        品牌名称：<input v-model="formData.brandName"><br>
        企业名称：<input v-model="formData.companyName"><br>
        排序：<input v-model="formData.ordered"><br>
        描述信息：<textarea rows="5" cols="20" v-model="formData.description"></textarea><br>
        状态：
        <input type="radio" v-model="formData.status" value="0">禁用
        <input type="radio" v-model="formData.status" value="1">启用<br>
        <input type="submit" value="提交">
    </form>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            formData: {
                id: "",
                brandName: "",
                companyName: "",
                ordered: "",
                description: "",
                status: "1" // 默认启用
            }
        },
        methods: {
            requestAddOrUpdateBrand() {
                let reqUrl = '/brand-case-vue/brandAdd';
                if (this.formData.id) {
                    reqUrl = '/brand-case-vue/brandEdit';
                }

                axios({
                    url: reqUrl,
                    data: this.formData,
                    method: 'POST'
                }).then((response) => {
                    if (response.data) {
                        window.location.href = "brand.html";
                    } else {
                        alert("操作失败");
                    }
                });
            },
            getParams() {
                let queryString = window.location.search;
                if (queryString.length > 0) {
                    let urlParams = new URLSearchParams(queryString);
                    let id = urlParams.get("id");
                    axios({
                        url: '/brand-case-vue/brandSel?id=' + id,
                        method: 'GET'
                    }).then((response) => {
                        let brand = response.data;
                        this.formData = {
                            id: brand.id,
                            brandName: brand.brandName,
                            companyName: brand.companyName,
                            ordered: brand.ordered,
                            description: brand.description,
                            status: brand.status.toString()
                        };
                    });
                }
            }
        },
        mounted() {
            this.getParams();
        }
    });
</script>
</body>
</html>
